//弹性布局
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.ai-center {
  align-items: center;
}

.ai-end {
  align-items: flex-end;
}

.jc-center {
  justify-content: center;
}

.jc-between {
  justify-content: space-between;
}

.jc-around {
  justify-content: space-around;
}

.jc-end {
  justify-content: flex-end;
}

//网格布局

.d-grid {
  display: grid;
}

$spacers: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem,
  6: 4.5rem,
  7: 6rem,
);

@each $size, $value in $spacers {
  //间隔
  .gap-#{$size} {
    gap: $value;
  }

  //外边距
  .m-#{$size} {
    margin: $value;
  }
  .mt-#{$size} {
    margin-top: $value;
  }
  .mb-#{$size} {
    margin-right: $value;
  }

  .ms-#{$size} {
    margin-bottom: $value;
  }

  .me-#{$size} {
    margin-left: $value;
  }
  .my-#{$size} {
    margin-top: $value;
    margin-bottom: $value;
  }
  .mx-#{$size} {
    margin-left: $value;
    margin-right: $value;
  }

  //内边距
  .p-#{$size} {
    padding: $value;
  }
  .pt-#{$size} {
    padding-top: $value;
  }
  .pb-#{$size} {
    padding-right: $value;
  }
  .ps-#{$size} {
    padding-bottom: $value;
  }
  .pe-#{$size} {
    padding-left: $value !important;
  }
  .px-#{$size} {
    padding-left: $value !important;
    padding-right: $value !important;
  }
  .py-#{$size} {
    padding-top: $value !important;
    padding-bottom: $value !important;
  }
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}
